<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 200px;
            background: red;
        }

        /*.div1 {*/
        /*float: left;*/
        /*}*/

        /*.div2 {*/
        /*clear: left;*/
        /*}*/

        /*.div1 {*/
        /*float: right;*/
        /*}*/

        /*.div2 {*/
        /*clear: right;*/
        /*}*/
        .div1 {
            float: left;
        }

        .div2 {
            float: right;
        }

        .div3 {
            clear: both;
        }
    </style>
</head>
<body>
<!--
        使用浮动遇到的问题？
            1、浮动的特征中有父级元素高度塌陷的问题；
            2、排列li时dispaly可以，float会遇到问题；


        clear               元素的某个方向上不能有浮动
           left               元素的左边不能有浮动的元素
           right              元素的右边不能有浮动的元素
           both               元素的两边不能有浮动的元素



-->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>